﻿<template>
    <div class="table">
        <div  class="divSearch">
            <Row>
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
            <!--搜索框-->
                <Col v-show="searchModel.AreaCode=='530000000000'">
                    <label class="searchLabel">是否包含县（市、区）:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.IsCity"  @on-change="getStatsData()" class="searchInput">
                        <Option value="1">否</Option>
                        <Option value="2">是</Option>
                    </Select>
                </Col>
                <Col>
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear" placeholder="请选择..." :label-in-value="true" @on-change="getStatsData()"  clearable class="searchInput">
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col>
                    <label class="searchLabel">桑园用途:</label>
                    <Select v-model="Option"  placeholder="请选择..." :label-in-value="true" clearable class="searchInput" width="200" @on-change="GetData">
                        <Option :value="item.value" v-for="item in Options" :key="item.value">{{item.name}}</Option>
                    </Select>
                </Col> -->
                <Col >
                    <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="totalLable"><Icon type="ios-list-outline" size="10"></Icon>&nbsp;列表</span></Radio>
                        <Radio label="barShow" title="柱状图"><span class="totalLable"><Icon type="stats-bars" size="10"></Icon>&nbsp;柱状图</span></Radio>   
                        <Radio label="mapShow" title="地图"><span class="totalLable"><Icon type="map" size="10"></Icon>&nbsp;地图</span></Radio>                                                                               
                        <Radio label="timeShow" title="历年统计图"><span class="totalLable"><Icon type="ios-pulse-strong" size="10"></Icon>&nbsp;时间趋势图</span></Radio>                                                                               
                    </RadioGroup> 
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table class="ContentTable">
                    <caption>
                        <div><span class="tableNum">表5——{{searchModel.FillInYear}}{{userinfo.AreaCode|omgAreaName}}蚕桑综合利用情况调查表</span>
                            <span class="tip">单位：吨、万元</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="2" style="width:50px;">序号</th>
                            <!-- <th rowspan="2" style="width:72px;">年份</th> -->
                            <th rowspan="2" style="width:100px;">县(市、区)</th>
                            <th colspan="2">桑枝菌</th>
                            <th colspan="2">桑叶茶</th>
                            <th colspan="2">桑果、汁、酒</th>
                            <th colspan="2">蚕沙提取叶绿素</th>
                            <th colspan="2">蚕沙肥料</th>
                            <th colspan="2">食用蛹、蛾</th>
                            <th colspan="2">蚕蛾酒</th>
                            <th colspan="2">其它</th>
                        </tr>
                        <tr>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                            <th>重量</th>
                            <th>产值</th>
                        </tr>
                        <tr v-if="datas.length>0">
                            <td style="width:50px;">1</td>
                            <!-- <td style="width:72px;">{{datas[0].FillYear}}</td> -->
                            <td style="width:100px;">{{datas[0].AreaName}}</td>
                            <td>{{datas[0].MulFunWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulFunValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulTeaWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulTeaValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulFruitWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulFruitValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulExcreWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulExcreValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulFertWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulFertValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulPupaeWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulPupaeValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulWineWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MulWineValue|decimal|formatCurrency}}</td>
                            <td>{{datas[0].OtherWeight|decimal|formatCurrency}}</td>
                            <td>{{datas[0].OtherValue|decimal|formatCurrency}}</td>
                        </tr>
                    </thead>
                    <tbody v-if="datas.length>0">
                        <tr v-for="(item,index) in datas"  v-show="index!==0" :key="item.FillYear" :class="{ td1:index%2!=0,red:AutoCity(item.AreaCode)}">
                            <td style="width:50px;">{{index+1}}</td>
                            <!-- <td style="width:72px;">{{item.FillYear}}</td> -->
                            <td style="width:100px;">{{item.AreaName}}</td>
                            <td>{{item.MulFunWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulFunValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulTeaWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulTeaValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulFruitWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulFruitValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulExcreWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulExcreValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulFertWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulFertValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulPupaeWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulPupaeValue|decimal|formatCurrency}}</td>
                            <td>{{item.MulWineWeight|decimal|formatCurrency}}</td>
                            <td>{{item.MulWineValue|decimal|formatCurrency}}</td>
                            <td>{{item.OtherWeight|decimal|formatCurrency}}</td>
                            <td>{{item.OtherValue|decimal|formatCurrency}}</td>
                        </tr>
                    </tbody>
                </table>
            </Col>
         </Row>
         <Row v-show="barShow">
            <!--饼图-->
            <div  id="divBar" style="width:1200px;height:670px;">饼图</div>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap">地图</div>
        </Row>
        <Row  v-show="timeShow">
            <!--时间趋势图-->
            <div id="divTime">时间趋势图</div>
        </Row>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("CSuserinfo").AreaCode),
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("CSuserinfo"),//获取当前用户信息
            CheckButton:'listShow',
            datas:[],//列表数据
            SelectName:'',
            echartsItem:['桑枝菌重量','桑枝菌产量',
            '桑叶茶、菜重量','桑叶茶、菜产量',
            '桑果、汁、酒产量','桑果、汁、酒重量',
            '蚕沙提取叶绿素重量','蚕沙提取叶绿素产量',
            '蚕沙肥料产量','蚕沙肥料重量',
            '食用蛹、蛾重量','食用蛹、蛾产量',
            '蚕蛾酒重量','蚕蛾酒产量',
            '其它产品重量','其它产品产量'],  
            AreaData:[],
            //柱状图数据
            MulFunWeightData:[],
            MulFunValueData:[],

            MulTeaWeightData:[],
            MulTeaValueData:[],

            MulFruitWeightData:[],
            MulFruitValueData:[],

            MulExcreWeightData:[],
            MulExcreValueData:[],

            MulFertWeightData:[],
            MulFertValueData:[],

            MulPupaeWeightData:[],
            MulPupaeValueData:[],

            MulWineWeightData:[],
            MulWineValueData:[],

            OtherWeightData:[],
            OtherValueData:[],
            barList:[],
            //地图数据
            mapType:'',//当前加载的地图模板
            GeoData:'',//top值 
            MapMulFunWeightData:[],
            MapMulFunValueData:[],

            MapMulTeaWeightData:[],
            MapMulTeaValueData:[],

            MapMulFruitWeightData:[],
            MapMulFruitValueData:[],

            MapMulExcreWeightData:[],
            MapMulExcreValueData:[],

            MapMulFertWeightData:[],
            MapMulFertValueData:[],

            MapMulPupaeWeightData:[],
            MapMulPupaeValueData:[],

            MapMulWineWeightData:[],
            MapMulWineValueData:[],

            MapOtherWeightData:[],
            MapOtherValueData:[],    
            mapList:[],
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'MulComplexQuest',
                FillInYear: '',
                TimesType: '',
                IsCity:'1',
                AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: ''
            },
            clientHeight: window.innerHeight - 260,//表格默认高度
            listShow:false,//列表显示控制器
            barShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
            total:100,
            timeShow:false,//时间趋势图显示控制器
             XData:[]//时间轴
        }
    },
    //高度计算
     mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 260;
            })()
        };
        // this.getStatsData();
        this.changeButton("listShow");
        //  this.showMap();  
    },
    //方法
    methods: {
         //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
                this.timeShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
                this.mapShow=false;
                this.timeShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
                this.timeShow=false;
            }
            else if(n=="timeShow")
            {
                this.listShow=false;
                this.barShow=false;//显示时间趋势图
                this.mapShow=false;
                this.timeShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
                 this.timeShow=false;
            }
        },
        //获取地区统计数据
        getStatsData(){
            var self = this;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            self.AreaData=[],
            //柱状图数据
            self.MulFunWeightData=[],self.MulFunValueData=[],self.MulTeaWeightData=[],self.MulTeaValueData=[],

            self.MulFruitWeightData=[],self.MulFruitValueData=[],self.MulExcreWeightData=[],self.MulExcreValueData=[],

            self.MulFertWeightData=[],self.MulFertValueData=[],self.MulPupaeWeightData=[],self.MulPupaeValueData=[],

            self.MulWineWeightData=[],self.MulWineValueData=[],self.OtherWeightData=[],self.OtherValueData=[],
            self.barList=[],
            //地图数据
            self.MapMulFunWeightData=[],self.MapMulFunValueData=[], self.MapMulTeaWeightData=[],self.MapMulTeaValueData=[],
            
            self.MapMulFruitWeightData=[],self.MapMulFruitValueData=[],self.MapMulExcreWeightData=[],self.MapMulExcreValueData=[],

            self.MapMulFertWeightData=[],self.MapMulFertValueData=[],self.MapMulPupaeWeightData=[],self.MapMulPupaeValueData=[],

            self.MapMulWineWeightData=[],self.MapMulWineValueData=[],self.MapOtherWeightData=[],self.MapOtherValueData=[],
            self.mapList=[],
            self.mapType=self.searchModel.AreaCode;
            self.GeoData=self.GetGeoData(self.mapType);
            self.$http.post('MulComplexQuest/PostStatsList', self.searchModel).then(function (res) {
                    if (res.data.status === 1) {
                        if (res.data.model!=null) {
                            self.datas=res.data.model;//列表赋值
                            self.CurrentAreaName=res.data.model[0].AreaName;//当前州(市)或者省
                            for(var i=1;i<res.data.model.length;i++)
                            {
                                self.AreaData.push(res.data.model[i].AreaName);
                                //柱状图数据
                                self.MulFunWeightData.push(res.data.model[i].MulFunWeight);self.MulFunValueData.push(res.data.model[i].MulFunValue);

                                self.MulTeaWeightData.push(res.data.model[i].MulTeaWeight); self.MulTeaValueData.push(res.data.model[i].MulTeaValue);

                                self.MulFruitWeightData.push(res.data.model[i].MulFruitWeight);self.MulFruitValueData.push(res.data.model[i].MulFruitValue);

                                self.MulExcreWeightData.push(res.data.model[i].MulExcreWeight);self.MulExcreValueData.push(res.data.model[i].MulExcreValue);

                                self.MulFertWeightData.push(res.data.model[i].MulFertWeight);self.MulFertValueData.push(res.data.model[i].MulFertValue);

                                self.MulPupaeWeightData.push(res.data.model[i].MulPupaeWeight);self.MulPupaeValueData.push(res.data.model[i].MulPupaeValue);

                                self.MulWineWeightData.push(res.data.model[i].MulWineWeight);self.MulWineValueData.push(res.data.model[i].MulWineValue);

                                self.OtherWeightData.push(res.data.model[i].OtherWeight);self.OtherValueData.push(res.data.model[i].OtherValue);
                                //地图数据
                                self.MapMulFunWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFunWeight});
                                self.MapMulFunValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFunValue});

                                self.MapMulTeaWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulTeaWeight});
                                self.MapMulTeaValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulTeaValue});

                                self.MapMulFruitWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFruitWeight});
                                self.MapMulFruitValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFruitValue});

                                self.MapMulExcreWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulExcreWeight});
                                self.MapMulExcreValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulExcreValue});

                                self.MapMulFertWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFertWeight});
                                self.MapMulFertValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulFertValue});

                                self.MapMulPupaeWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulPupaeWeight});
                                self.MapMulPupaeValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulPupaeValue});

                                self.MapMulWineWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulWineWeight});
                                self.MapMulWineValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulWineValue});

                                self.MapOtherWeightData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].OtherWeight});
                                self.MapOtherValueData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].OtherValue});
                            }
                            //柱状图数据----数组
                            self.barList.push(self.MulFunWeightData,self.MulFunValueData,self.MulTeaWeightData,self.MulTeaValueData);

                            self.barList.push(self.MulFruitWeightData,self.MulFruitValueData,self.MulExcreWeightData,self.MulExcreValueData);

                            self.barList.push(self.MulFertWeightData,self.MulFertValueData,self.MulPupaeWeightData,self.MulPupaeValueData);

                            self.barList.push(self.MulWineWeightData,self.MulWineValueData,self.OtherWeightData,self.OtherValueData);
                            //地图数据----数组
                            self.mapList.push(self.MapMulFunWeightData,self.MapMulFunValueData);

                            self.mapList.push(self.MapMulTeaWeightData,self.MapMulTeaValueData);

                            self.mapList.push(self.MapMulFruitWeightData,self.MapMulFruitValueData);

                            self.mapList.push(self.MapMulExcreWeightData,self.MapMulExcreValueData);

                            self.mapList.push(self.MapMulFertWeightData,self.MapMulFertValueData,self.MapMulPupaeWeightData,self.MapMulPupaeValueData);

                            self.mapList.push(self.MapMulWineWeightData,self.MapMulWineValueData,self.MapOtherWeightData,self.MapOtherValueData);
                            self.showEcharts(); 
                            self.getStatsByTime();
                        }
                    }
                    else {
                        self.$Modal.error({title: '提示信息',content: res.data.message});
                    }
                });
             if(self.searchModel.IsCity!="1"){
                self.$http.post('MulComplexQuest/PostStatsDetailList', self.searchModel).then(function (res) {
                    if (res.data.status === 1) {
                        if (res.data.model!=null) {
                            self.datas=res.data.model;//列表赋值
                        }
                    }
                    else {
                        self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                        });
                    }
                });
            }
        },
        getStatsByTime(){//获取时间趋势统计数据
            var self=this;
            self.listTime=[];
            self.XData=[];
            self.$http.post('MulComplexQuest/PostStatsTimeList', self.searchModel).then(function (res) {
                if(res.data.status===1)
                {
                    //按年份对数据进行归类
                    if(res.data.model.length>0)
                    {
                        var array = new Array();
                        array[0]=[];array[1]=[];array[2]=[];array[3]=[];array[4]=[];
                        array[5]=[];array[6]=[];array[7]=[];array[8]=[];array[9]=[];array[10]=[];
                        array[11]=[];array[12]=[];array[13]=[];array[14]=[];array[15]=[];
                        for(var i=0;i<res.data.model.length;i++)
                        { 
                             self.XData.push(res.data.model[i].FillYear)
                            array[0].push(res.data.model[i].MulFunWeight==null||''?0:res.data.model[i].MulFunWeight);
                            array[1].push(res.data.model[i].MulFunValue==null||''?0:res.data.model[i].MulFunValue);
                            array[2].push(res.data.model[i].MulTeaWeight==null||''?0:res.data.model[i].MulTeaWeight);
                            array[3].push(res.data.model[i].MulTeaValue==null||''?0:res.data.model[i].MulTeaValue);
                            array[4].push(res.data.model[i].MulFruitWeight==null||''?0:res.data.model[i].MulFruitWeight);
                            array[5].push(res.data.model[i].MulFruitValue==null||''?0:res.data.model[i].MulFruitValue);
                            array[6].push(res.data.model[i].MulExcreWeight==null||''?0:res.data.model[i].MulExcreWeight);
                            array[7].push(res.data.model[i].MulExcreValue==null||''?0:res.data.model[i].MulExcreValue); 

                            array[8].push(res.data.model[i].MulFertWeight==null||''?0:res.data.model[i].MulFertWeight);
                            array[9].push(res.data.model[i].MulFertValue==null||''?0:res.data.model[i].MulFertValue);

                            array[10].push(res.data.model[i].MulPupaeWeight==null||''?0:res.data.model[i].MulPupaeWeight);
                            array[11].push(res.data.model[i].MulPupaeValue==null||''?0:res.data.model[i].MulPupaeValue);

                            array[12].push(res.data.model[i].MulWineWeight==null||''?0:res.data.model[i].MulWineWeight);
                            array[13].push(res.data.model[i].MulWineValue==null||''?0:res.data.model[i].MulWineValue);

                            array[14].push(res.data.model[i].OtherWeight==null||''?0:res.data.model[i].OtherWeight);
                            array[15].push(res.data.model[i].OtherValue==null||''?0:res.data.model[i].OtherValue);
                        }
                        self.listTime.push(array[0],array[1],array[2],array[3],array[4],array[5],);
                        self.listTime.push(array[6],array[7],array[8],array[9],array[10],array[11]);
                        self.listTime.push(array[12],array[13],array[14],array[15]);
                        self.getTimeTrendStats();
                    }
                    else{
                        self.$Modal.warning({
                            title: '提示信息',
                            content: "时间趋势统计数据为空"
                        });
                    }
                }
                else if(res.data.status===0)
                {
                    self.$Modal.warning({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
                else{
                    self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
            });
        },
        getTimeTrendStats(){//展示时间趋势统计图
            //************************显示时间趋势图
            var self=this;
            var container=document.getElementById('divTime');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainer = function () {
                container.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                container.style.height = (window.innerHeight-240)+'px';
            };
            //设置容器高宽
            resizeContainer();
            var myDiv = myEcharts.init(container, 'shine');
            var TableName='表5——'+self.CurrentAreaName+'蚕桑综合利用情况历年统计图';
            var option = self.GetTimeOption(TableName,self.XData,self.echartsItem, self.listTime,'line');
            myDiv.setOption(option);
            window.onresize = function () {
                //重置容器高宽
                resizeContainer();
                myDiv.resize();
            };
        },
        AutoCity(AreaCode){
            var result=false;
            if(AreaCode!=null&&AreaCode!=""&&this.searchModel.IsCity=="2")
            {
                if(AreaCode.substr(4,2)=="00")
                {
                    result=true;
                }
            }
            return result;
        },
        DataExport(){
            //导出
           var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            window.open(this.$http.defaults.baseURL + "MulComplexQuest/GetStatsExcelData?FillInYear=" + self.searchModel.FillInYear+"&&AreaCode=" + self.searchModel.AreaCode+"&&Status=" + self.searchModel.Status);
        },
        //展示柱状图和地图代码
        showEcharts(){
              //************************显示柱状图
            var self=this;
            var containerBar=document.getElementById('divBar');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBar.style.height = (window.innerHeight-240)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBar = myEcharts.init(containerBar, 'shine');
            var BarName='表5——'+self.searchModel.FillInYear+self.CurrentAreaName+'蚕桑综合利用情况柱状统计图';
            var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItem,self.barList,'bar');
            myBar.setOption(optionBar);
            //柱状图展示完
             //******************显示地图
            var containerMap=document.getElementById('divMap');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerMap.style.height = (window.innerHeight-260)+'px';
            };
            //geo数据完
            //设置容器高宽
            resizeContainerMap();
            var myMap = myEcharts.init(containerMap, 'shine');
            var MapName='表5——'+self.searchModel.FillInYear+self.CurrentAreaName+'蚕桑综合利用情况统计地区分布图';
            var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItem,self.mapList);
            myMap.setOption(optionMap);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myMap.resize();
                myBar.resize();
            };
        }
    },
    //创建Vue页面方法
    created: function () {
        this.SearchAreaList(); 
        this.getStatsData();   //获取地区统计数据      
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
